import * as THREE from "three";
import { FontLoader } from 'three/addons/loaders/FontLoader.js';
import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
import tomMaterial from "./images/tom.jpg";
import floorMaterial from "./images/floor.jpg";

import backMaterial from "./images/back.jpg";
import bottomMaterial from "./images/bottom.jpg";
import frontMaterial from "./images/tom.jpg";
import leftMaterial from "./images/left.jpg";
import rightMaterial from "./images/right.jpg";
import topMaterial from "./images/top.jpg";

import CADTHREE from "./cube/three.init.js";

import { optCubes } from "./points.js";

const mats = [
  backMaterial,
  bottomMaterial,
  frontMaterial,
  leftMaterial,
  rightMaterial,
  topMaterial,
];

const { scene, controls } = CADTHREE.init();

// 自定义材质6个面不同的贴图，类似骰子的效果
const textureloader = new THREE.TextureLoader();
const material1112 = [
  new THREE.MeshStandardMaterial({
    map: textureloader.load(frontMaterial),
    side: THREE.DoubleSide,
  }),
  new THREE.MeshStandardMaterial({
    map: textureloader.load(backMaterial),
    side: THREE.DoubleSide,
  }),
  new THREE.MeshStandardMaterial({
    map: textureloader.load(bottomMaterial),
    side: THREE.DoubleSide,
  }),
  new THREE.MeshStandardMaterial({
    map: textureloader.load(topMaterial),
    side: THREE.DoubleSide,
  }),
  new THREE.MeshStandardMaterial({
    map: textureloader.load(leftMaterial),
    side: THREE.DoubleSide,
  }),
  new THREE.MeshStandardMaterial({
    map: textureloader.load(rightMaterial),
    side: THREE.DoubleSide,
  }),
];

const cubes = [];
for (let i = 0; i < optCubes.length; i++) {
  const cube = CADTHREE.drawCubeByPlane(optCubes[i])
  cubes.push(cube)
}

CADTHREE.regHover(cubes);
CADTHREE.regClick();
drawLine();

const geometry = new THREE.BoxGeometry(5000, 5000, 5000);

const cube = new THREE.Mesh(geometry, material1112);
// console.warn(cube.geometry)
// scene.add( cube );

// 添加 XYZ 坐标轴 (红: X, 绿: Y, 蓝: Z)
const axesHelper = new THREE.AxesHelper(160); // 参数表示轴的长度
// scene.add(axesHelper);

// 添加箭头
const arrowSize = 0.1; // 箭头大小
const arrowHeadLength = 0.15; // 箭头头部长度
const arrowHeadWidth = 0.1; // 箭头头部宽度

// X 轴箭头 (红色)
const xArrow = new THREE.ArrowHelper(
  new THREE.Vector3(1, 0, 0), // 方向 (沿 X 轴)
  new THREE.Vector3(4, 0, 0), // 起点 (X 轴末端)
  arrowSize, // 箭头长度
  0xff0000, // 红色
  arrowHeadLength, // 箭头头部长度
  arrowHeadWidth // 箭头头部宽度
);
// scene.add(xArrow);

// Y 轴箭头 (绿色)
const yArrow = new THREE.ArrowHelper(
  new THREE.Vector3(0, 1, 0), // 方向 (沿 Y 轴)
  new THREE.Vector3(0, 4, 0), // 起点 (Y 轴末端)
  arrowSize, // 箭头长度
  0x00ff00, // 绿色
  arrowHeadLength, // 箭头头部长度
  arrowHeadWidth // 箭头头部宽度
);
// scene.add(yArrow);

// Z 轴箭头 (蓝色)
const zArrow = new THREE.ArrowHelper(
  new THREE.Vector3(0, 0, 1), // 方向 (沿 Z 轴)
  new THREE.Vector3(0, 0, 4), // 起点 (Z 轴末端)
  arrowSize, // 箭头长度
  0x0000ff, // 蓝色
  arrowHeadLength, // 箭头头部长度
  arrowHeadWidth // 箭头头部宽度
);
// scene.add(zArrow);

// drawPlaneByBufferGeometryUV();

function drawPlaneByBufferGeometryUV() {
  //创建BufferGeometry实例
  const bufferGeom = new THREE.BufferGeometry(); //初始化存放顶点信息的序列化数组

  const positions = new Float32Array([
    0,
    0,
    0, //point0
    250,
    0,
    0, //point1
    250,
    100,
    0, //point2
    0,
    100,
    0, //point3
    0,
    0,
    100, //point0
    250,
    0,
    100, //point1
    250,
    100,
    100, //point2
    0,
    100,
    100, //point3
  ]); //设置顶点信息

  bufferGeom.setAttribute("position", new THREE.BufferAttribute(positions, 3));

  const indexs = new Uint16Array([
    0,
    1,
    2,
    0,
    2,
    3, // 前面
    4,
    5,
    6,
    4,
    6,
    7, // 后面
    0,
    1,
    5,
    0,
    5,
    4, // 底面
    3,
    2,
    6,
    3,
    6,
    7, // 顶面
    0,
    3,
    7,
    0,
    7,
    4, // 左面
    1,
    2,
    6,
    1,
    6,
    5, // 右面
  ]); //设置画面的索引

  bufferGeom.index = new THREE.BufferAttribute(indexs, 1);

  const planeMaterial = new THREE.MeshBasicMaterial({ side: THREE.DoubleSide });
  // planeMaterial.depthWrite = false
  const mesh = new THREE.Mesh(bufferGeom, planeMaterial);
  scene.add(mesh);

  drawMesh();
}

function drawMesh() {
  const ps = [
    new Float32Array([0, -0.1, 0, 100, -0.1, 0, 100, -0.1, 50, 0, -0.1, 50]),
    new Float32Array([
      100, -0.1, 0, 200, -0.1, 0, 200, -0.1, 50, 100, -0.1, 50,
    ]),
    new Float32Array([
      200, -0.1, 0, 250, -0.1, 0, 250, -0.1, 50, 200, -0.1, 50,
    ]),
    new Float32Array([
      0, -0.1, 50, 100, -0.1, 50, 100, -0.1, 100, 0, -0.1, 100,
    ]),
    new Float32Array([
      100, -0.1, 50, 200, -0.1, 50, 200, -0.1, 100, 100, -0.1, 100,
    ]),
    new Float32Array([
      200, -0.1, 50, 250, -0.1, 50, 250, -0.1, 100, 200, -0.1, 100,
    ]),
  ];
  ps.forEach((positions, index) => {
    const bufferGeom = new THREE.BufferGeometry();
    bufferGeom.setAttribute(
      "position",
      new THREE.BufferAttribute(positions, 3)
    );

    const indexs = new Uint16Array([0, 1, 2, 0, 2, 3]);

    bufferGeom.index = new THREE.BufferAttribute(indexs, 1);
    const uvs = new Uint16Array([0, 0, 1, 0, 1, 1, 0, 1]); //设置UV
    bufferGeom.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));

    const planetTexture = new THREE.TextureLoader().load(mats[index]); //创建材质
    const material = new THREE.MeshBasicMaterial({
      map: planetTexture,
      side: THREE.DoubleSide,
    });

    const mesh = new THREE.Mesh(bufferGeom, material);
    mesh.userData = {
      type: "face",
      index: index,
      name: `贴图${index}`,
    };

    scene.add(mesh);
  });
}

function drawLine() {
  const material = new THREE.LineBasicMaterial({ color: 0xff00ff });

  // let arr = [
  //   [10300, -77099, 0],
  //   [10300, -77499, 0],
  //   [14100, -77499, 0],
  //   [14100, -75799, 0],
  //   [15600, -75799, 0],
  //   [15600, -74499, 0],
  //   [15650, -74499, 0],
  //   [15650, -74099, 0],
  //   [15400, -74099, 0],
  //   [15400, -75599, 0],
  //   [14100, -75599, 0],
  //   [14100, -74899, 0],
  //   [13900, -74899, 0],
  //   [13900, -77299, 0],
  //   [11800, -77299, 0],
  //   [11800, -75099, 0],
  //   [12300, -75099, 0],
  //   [12300, -74899, 0],
  //   [11600, -74899, 0],
  //   [11600, -77099, 0],
  // ];
  // let arr = [
  //   [
  //     -155098,
  //     -130018,
  //     0
  //   ],
  //   [
  //     -156312,
  //     -131135,
  //     0
  //   ],
  //   [
  //     -155940,
  //     -131540,
  //     0
  //   ],
  //   [
  //     -156124,
  //     -131709,
  //     0
  //   ],
  //   [
  //     -156666,
  //     -131121,
  //     0
  //   ],
  //   [
  //     -155267,
  //     -129834,
  //     0
  //   ]
  // ];
  // let arr = [
  //   [
  //     -143045,
  //     -132045,
  //     0
  //   ],
  //   [
  //     -143229,
  //     -132214,
  //     0
  //   ],
  //   [
  //     -143838,
  //     -131552,
  //     0
  //   ],
  //   [
  //     -144611,
  //     -132263,
  //     0
  //   ],
  //   [
  //     -144002,
  //     -132925,
  //     0
  //   ],
  //   [
  //     -144517,
  //     -133399,
  //     0
  //   ],
  //   [
  //     -144653,
  //     -133252,
  //     0
  //   ],
  //   [
  //     -144285,
  //     -132913,
  //     0
  //   ],
  //   [
  //     -145774,
  //     -131294,
  //     0
  //   ],
  //   [
  //     -149013,
  //     -134272,
  //     0
  //   ],
  //   [
  //     -147524,
  //     -135892,
  //     0
  //   ],
  //   [
  //     -147156,
  //     -135553,
  //     0
  //   ],
  //   [
  //     -147020,
  //     -135700,
  //     0
  //   ],
  //   [
  //     -147535,
  //     -136174,
  //     0
  //   ],
  //   [
  //     -149363,
  //     -134187,
  //     0
  //   ],
  //   [
  //     -146860,
  //     -131885,
  //     0
  //   ],
  //   [
  //     -147097,
  //     -131628,
  //     0
  //   ],
  //   [
  //     -146913,
  //     -131459,
  //     0
  //   ],
  //   [
  //     -146676,
  //     -131716,
  //     0
  //   ],
  //   [
  //     -145830,
  //     -130938,
  //     0
  //   ],
  //   [
  //     -144747,
  //     -132115,
  //     0
  //   ],
  //   [
  //     -143974,
  //     -131405,
  //     0
  //   ],
  //   [
  //     -144854,
  //     -130448,
  //     0
  //   ],
  //   [
  //     -145038,
  //     -130617,
  //     0
  //   ],
  //   [
  //     -145613,
  //     -129991,
  //     0
  //   ],
  //   [
  //     -145245,
  //     -129653,
  //     0
  //   ]
  // ]
  let arr = [
    [
      -157027,
      -141438,
      0
    ],
    [
      -157197,
      -141254,
      0
    ],
    [
      -159110,
      -143014,
      0
    ],
    [
      -159280,
      -142830,
      0
    ],
    [
      -159648,
      -143168,
      0
    ],
    [
      -159309,
      -143537,
      0
    ]
  ]

  const points = [];
  arr.forEach((element) => {
    points.push(new THREE.Vector3(element[0], element[1], 0));
  });
  // points.push(new THREE.Vector3(arr[0][0], arr[0][1], 0));

  const geometry = new THREE.BufferGeometry().setFromPoints(points);

  const line = new THREE.Line(geometry, material);
  scene.add(line);

  // 在每个顶点上添加序号
  var loader = new FontLoader();
  loader.load('/src/assets/optimer_bold.typeface.json', (res) => {
    points.forEach((point, index) => {
      let textGeometry = new TextGeometry(index.toString(), {
        font: res,          // 字体格式
        size: 100,           // 字体大小
        height: 1,          // 字体深度
        curveSegments: 11,  // 曲线控制点数
        bevelEnabled: true, // 斜角
        bevelThickness: 0.1,  // 斜角的深度
        bevelSize: 1,       // 斜角的大小
        bevelSegments: 1    // 斜角段数
      })
      var mat = new THREE.MeshPhongMaterial({
        color: "white",
        opacity: 0.8,
        shininess: 1,
      });
      var mesh = new THREE.Mesh(textGeometry, mat);
      mesh.position.copy(point)
      scene.add(mesh);
    })
  })
  controls.target.set(14100, -74799, 0);

  controls.update()
}
